<template>
  <div>
     <mt-header title="食堂外卖" class="shitang">
      <mt-button slot="left" icon="back" @click="goback"></mt-button>
    </mt-header>
    <my-header></my-header> 
    <mt-navbar  v-model="selected">
      <mt-tab-item id="1">销量最高</mt-tab-item>
      <mt-tab-item id="2">距离最近</mt-tab-item>
      <mt-tab-item id="3">时间最短</mt-tab-item>
    </mt-navbar>
    <mt-tab-container v-model="selected" class="main">
      <mt-tab-container-item id="1">
         <div class="food">
        <div v-for="(item,i) in shitang_sale" :key="i"  @click="store(`${item.name_store}`)">
          <img :src="item.pic_store" alt="" class="food-left" />
          <div class="food-right">
            <h2>{{item.name_store}}</h2>
            <div class="item-left">
              <h5>月售:{{item.sale_store}}</h5>
              <span>起送价:￥{{item.minPrice_store}}</span>
              <p>{{item.info_store}}</p>
            </div>
            <div class="item-right">
              <h5>{{item.time_store}}分钟|{{item.range_store}}m</h5>
              <span>{{item.way_store}}</span>
            </div>
          </div>
        </div>  
      </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
         <div class="food">
        <div v-for="(item,i) in shitang_range" :key="i"  @click="store(`${item.name_store}`)">
          <img :src="item.pic_store" alt="" class="food-left" />
          <div class="food-right">
            <h2>{{item.name_store}}</h2>
            <div class="item-left">
              <h5>月售:{{item.sale_store}}</h5>
              <span>起送价:￥{{item.minPrice_store}}</span>
              <p>{{item.info_store}}</p>
            </div>
            <div class="item-right">
              <h5>{{item.time_store}}分钟|{{item.range_store}}m</h5>
              <span>{{item.way_store}}</span>
            </div>
          </div>
        </div>  
      </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="3">
         <div class="food">
        <div v-for="(item,i) in shitang_time" :key="i"  @click="store(`${item.name_store}`)">
          <img :src="item.pic_store" alt="" class="food-left" />
          <div class="food-right">
            <h2>{{item.name_store}}</h2>
            <div class="item-left">
              <h5>月售:{{item.sale_store}}</h5>
              <span>起送价:￥{{item.minPrice_store}}</span>
              <p>{{item.info_store}}</p>
            </div>
            <div class="item-right">
              <h5>{{item.time_store}}分钟|{{item.range_store}}m</h5>
              <span>{{item.way_store}}</span>
            </div>
          </div>
        </div>  
      </div>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>

<style scoped>
  .shitang{
    background-color: #cd5c5c;
  }
   .food {
  margin-bottom: 50px;
}
.food > div {
  border-bottom: 1px dashed #eee;
  padding-bottom: 10px;
  margin: 5px;
}
.food img {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  margin: 5px;
}
.food-left {
  float: left;
}
.food-right {
  height: 100px;
}
.food-right > h2 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 5px;
}
.food-right span {
  color: #cd5c5c;
  line-height: 30px;
}
.food-right p {
  background-color: #cd5c5c;
  border-radius:5px;
  line-height: 25px;
  text-align: center;
}
.item-left {
  float: left;
  text-align: left;
}
.item-right {
  text-align: right;
}
</style>

<script>
export default {
  data(){
    return{
      selected:'1',
      shitang_sale:[],
      shitang_range:[],
      shitang_time:[]
    }
  },
  mounted(){
    this.axios.get('/shitang/shitang_sale').then((result)=>{
      this.shitang_sale=result.data;
    })
    this.axios.get('/shitang/shitang_range').then((result)=>{
      this.shitang_range=result.data;
    })
    this.axios.get('/shitang/shitang_time').then((result)=>{
      this.shitang_time=result.data;
    })
  },
  methods:{
    goback(){
      this.$router.back();
    },
    store(e){
      let name=e;
      console.log(name);
      this.$router.push(`/store?name_store=${name}`)
    }
  }
}
</script>